<template>
<!--    <div class="default-main ba-table-box">-->
<!--        <el-dialog class="ba-operate-dialog" v-model="Table_data.table.extend!.showInfo" width="90%"-->
<!--                   style="height: 86%">-->

            <el-drawer
                title="添加景点"
                v-model="Table_data.table.extend!.showInfo"
                size ="70%"
                show-close
                :withHeader="false"
            >


            <el-form
                label-width="77px"
                class="ele-form-search"
                @submit.native.prevent>
                <el-row :gutter="15">
                    <el-col :lg="6" :md="12">
                        <el-form-item label="景点名称:">
                            <el-input
                                v-model="searchParams.scenic_name"
                                clearable
                                placeholder="请输入景点名称"/>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="6" :md="12">
                        <div class="ele-form-actions">
                            <el-button
                                type="primary"
                                icon="el-icon-Search"
                                class="ele-btn-icon"
                                @click="handleSearch">查询
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>


            <el-button
                type="primary"
                @click="handleAdd"
                style="float: left; margin-bottom: 15px"

            >
                提交
            </el-button>
            <!-- 表格 -->
            <el-table
                ref="multipleTable"
                :data="tableData"
                v-loading="loading"
                :border="true"
                highlight-selection-row
                style="width: 100%"
                @selection-change="handleSelectionChange"
                height="83%"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="景点ID" width="100" align="center" prop="scenicId"></el-table-column>
                <el-table-column label="景点名称" width="200" align="center" prop="scenicName"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="table_name" align="center" label="封面">
                    <template #default="scope">
                        <img :src="scope.row.newPicUrl" alt="" style="width: 40px; height: 40px">
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
                <el-table-column prop="bizTime" label="开放时间" show-overflow-tooltip></el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                background
                @size-change="handleSizeChange"
                v-if="pageTotal > 0"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next"
                :page-sizes="[20, 40, 60, 80]"
                :total="pageTotal">
            </el-pagination>
            </el-drawer>

<!--        </el-dialog>-->
<!--    </div>-->
</template>

<script setup lang="ts">
import {onMounted, inject, ref, provide,watch} from 'vue';
import {useI18n} from 'vue-i18n';
import createAxios from "/@/utils/axios";
import {ElMessage} from 'element-plus'; // 导入 Element UI 的 Message 组件

const {t} = useI18n();
const Table_data = inject('baTable') as any; // Inject 'baTable' context
const searchParams = ref({
    scenic_name: '',
    page: 1,
    pageSize: 10
});
const tableData = ref([]);
const loading = ref(false);
const showDetail = ref(false);
const pageTotal = ref<number>(0);
const scenicId = ref<string>();
const selectBody = ref([]);


// 监听弹窗的显示状态，打开时清空数据并重新加载
watch(() => Table_data.table.extend!.showInfo, (newVal) => {
    if (newVal) {
        initializeData();  // 每次弹窗打开时初始化数据
    }
});

// 初始化数据
const initializeData = () => {
    searchParams.value.scenic_name = '';  // 清空景点名称
    searchParams.value.page = 1;          // 重置分页
    searchParams.value.pageSize = 10;     // 重置每页数量
    tableData.value = [];                 // 清空表格数据
    selectBody.value = [];               // 清空选中的数据
    pageTotal.value = 0;                  // 重置总数
};


// 处理查询
const handleSearch = async () => {
    loading.value = true;
    try {
        const res = await getList();
        tableData.value = res.data.list;
        pageTotal.value = res.data.total;
        loading.value = false;
    } catch (error) {
        console.error('请求失败:', error);
        loading.value = false;
    }
};

// 处理添加按钮点击
const handleAdd = async () => {
    if (selectBody.value.length == 0) {
        ElMessage.error('请选择景点')
        return false;
    }
    const res = await addScenic();
    ElMessage.success(res.msg)
    Table_data.table.extend!.showInfo = false

};

const toScenicDetail = (scenic_id: string) => {
    showDetail.value = true;
    scenicId.value = scenic_id;
};

const handleSelectionChange = (val: []) => {
    selectBody.value = val;
};

const handleCurrentChange = async (page: number) => {
    searchParams.value.page = page;
    await handleSearch(); // 调用handleSearch而不是直接getList
};

const handleSizeChange = async (pageSize: number) => {
    searchParams.value.pageSize = pageSize;
    await handleSearch(); // 调用handleSearch而不是直接getList
};

const getList = () => {
    return createAxios(
        {
            url: '/admin/scenic/getList',
            method: 'POST',
            data: searchParams.value
        },
    );
};


const addScenic = () => {
    return createAxios(
        {
            url: '/admin/scenic/addScenic',
            method: 'POST',
            data: selectBody.value
        },
    );
};


const tableRef2 = ref();
</script>

<style scoped lang="scss">
.info-box {
    margin-top: 60px;

    div {
        width: 100%;
        text-align: center;
    }

    .mt-40 {
        margin-top: 40px;
    }
}
.el-drawer__header{
    margin-bottom: 1px !important;
}
</style>
